<%-- controller = game, action = view --%>
<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONObject" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONException" %>
<%
  Gson gson = new Gson();
  Context ctx = Context.get();
  String k = ctx.params.get("k");
  Map game = (Map) ctx.data.get("game");
  Map creator = (Map) game.get("creator");
  List<Map> rxns = (List<Map>) game.get("reaction");
%>
<script type="text/javascript">

  $(document).ready(function() {
    be.init('<%= game.get("id") %>', <%= rxns != null ? gson.toJson(rxns) : "[]" %>);
    be.showReactions(<%= gson.toJson(creator.equals(ctx.account)) %>);
  });
</script>
<div class="p-relative">
  <div>
    <h2 class="d-inline"><%= game.get("name") %></h2>
    <h3 class="d-inline">(<%= game.get("type") %>)</h3>
    created by <%= creator.get("full_name") %>
    <p>
    <%
      if (creator.equals(ctx.account)) {
    %>
      <a onclick="$('#create_reaction').show();" style="padding: 0 2px;">
        create question and answer cards
      </a>
    <%
      }
      if (creator.equals(ctx.account) && rxns != null && rxns.size() > 0) {
    %>
      -
    <%
      }
      if (rxns != null && rxns.size() > 0) {
    %>
      <a href="/game/play?id=<%= game.get("id")%>" style="padding: 0 2px;">
        play this game
      </a>
    <%
      }
    %>
    </p>
  </div>
  <hr />
  <div id="reactions">
    <span class="b">Question and Answer Cards</span>
    <%
      if (rxns == null || rxns.size() < 1) {
    %>
    None yet.
    <%
      }
    %>
  </div>
  <%
    if (creator.equals(ctx.account)) {
  %>
  <div id="create_reaction" class="popup" style="left: 128px; top: 64px;">
    <div class="popup-close"><a onclick="$('#create_reaction').hide()">&#215;</a></div>
      <span class="b large">Create a Reaction Question Card</span>
    <p>
      
    </p>
    <p>
      Specify the reactants and products of the reaction.
    </p>
    <p>
      When the reaction is balanced, this button will turn green
      <button class="create" enabled="false" onclick="be.saveReaction('<%= k %>')">
        create
      </button>
    </p>
    <hr>
    <div class="f-right">
      <p>Answer Card Preview</p>
      <canvas class="ac" width="250" height="350"></canvas>
    </div>
    <div class="f-left" style="width: 400px; padding: 0 16px 0 0;">
      <span class="b d-inline">Reactants</span>
      <a id="add-reactant" class="enabled" onclick="be.addMolecule('reactant')">add</a>
      <a id="remove-reactant" class="disabled" onclick="be.removeMolecule('reactant')">remove</a>
      <div id="reactants">
        <p>Add a reactant using the button above.</p>
      </div>
      <div class="clear"></div>
      <span class="b d-inline">Products</span>
      <a id="add-product" class="enabled" onclick="be.addMolecule('product')">add</a>
      <a id="remove-product" class="disabled" onclick="be.removeMolecule('product')">remove</a>
      <div id="products">
        <p>Add a product using the button above.</p>
      </div>
      <div class="clear"></div>
      <hr>
    </div>
    <div class="balance">
      <span class="b">Balance</span>
      <table id="elements">
        <tr><td>
          <p class="a-left">
            Add a reactant or product to see table.
          </p>
        </td></tr>
      </table>
    </div>
  </div>
  <div id="add_image" class="popup">
    <div class="popup-close"><a onclick="$('#add_image').hide()">&#215;</a></div>
    <div>
      <form id="upload_image" action="" method="post" enctype="multipart/form-data">
        <p class="xlarge a-center">Add Image</p>
        <div>
          <input type="file" name="file">
        </div>
        <input type="hidden" name="p_kind" value="reaction">
        <input type="hidden" name="p_id" value="">
        <input type="hidden" name="b" value="<%= ctx.uri %>?<%= ctx.query %>">
        <input type="submit" value="Upload" class="f-right" />
      </form>
    </div>
  </div>
  <%
    }
  %>
</div>
